<%--
  Created by IntelliJ IDEA.
  User: 娅娅
  Date: 2021/7/1
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>疫苗接种预约系统</title>
  </head>
  <body>
    <table style="background: antiquewhite">
      <tr>
        <td align="center" colspan="5"><h2>疫苗接种预约系统</h2></td>
      </tr>
      <tr>
        <td colspan="5"><a href="add.jsp"><button>添加预约</button></a></td>
      </tr>
      <tr style="background: burlywood">
        <th>预约人姓名</th>
        <th>预约人身份证号</th>
        <th>接种状态</th>
        <th>预约接种日期</th>
        <th>操作</th>
      </tr>
      <c:forEach var="b" items="${list}" varStatus="book">
      <tr <c:if test="${book.index % 2==0}">style="background: beige" </c:if>>
        <td>${b.userName}</td>
        <td>${b.cardId}</td>
        <td>${b.status==0?"预约":"已接种"}</td>
        <td>${b.bookingDate}</td>
        <td>
          <a class="change" status="${b.status}" id="${b.id}" href="javascript:void(0)">完成接种</a>
          <a href="#" onclick="del(${b.id})">删除</a>
        </td>       
      </tr>
      </c:forEach>
    </table>
    <p>
      <a href="ListServlet?pageNo=${pageNo-1}">上一页</a>
      <a href="ListServlet?pageNo=${pageNo+1}">下一页</a>
    </p>
    <p>${info}</p>
  <script src="js/jquery-1.8.3.js"></script>
  <script>
    <%--删除--%>
    function del(id) {
      if (confirm("确认要删除吗？")){
        $.post("DelServlet","id="+id,function (date) {
          if (date>0){
            alert("删除成功！");
            location.href='ListServlet';
          }
        })
      }
    }

    <%--修改--%>
    $(".change").click(function () {
      var id = $(this).attr("id");
      var status = $(this).attr("status");
      var node =$(this).parent().prev().prev();
      if (status>0){
        alert("该人员已接种！")
      }else {
        $.post("UpdateServlet",{id:id,status:status},function (date) {
          alert(date);
          node.text("完成接种")
        })
      }
    })
  </script>
  </body>
</html>
